<#macro layout>
	<!DOCTYPE html>
	<html>
	<head>
		<title>${WEB_NAME!}</title>
		<!--mobile apps-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		<!--mobile apps-->
		<!--Custom Theme files -->
		<link href="${CTPATH}/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
		<link href="${CTPATH}/css/style.css" type="text/css" rel="stylesheet" media="all">
		<link rel="stylesheet" href="${CTPATH}/css/prettySticky.css" type="text/css">
		<!-- //Custom Theme files -->
		<!-- js -->
		<script src="${CTPATH}/js/jquery-1.11.1.min.js"></script>
		<!-- //js -->
		<!-- start-smoth-scrolling-->
		<script type="text/javascript">
            jQuery(document).ready(function($) {
                $(".scroll").click(function(event){
                    event.preventDefault();

                    $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
                });
            });
		</script>
		<!--//end-smoth-scrolling-->
	</head>
	<body>
	<#if  REQUEST.requestURI != '/j/'>
		<div  id="home" class="banner about-banner">
			<#else>
				<div  id="home" class="banner">
	</#if>
	<div class="banner-info">
		<!--navigation-->
		<div class="top-nav">
			<nav>
				<div class="container">
					<div class="navbar-header logo">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<#if REQUEST.requestURI.substring(3)== ''>
							<h1><a href="${CPATH}">${WEB_NAME}</a></h1>
							<#else>
								<h1><a href="${CPATH}">${REQUEST.requestURI.substring(3)?replace('%20',' ')?replace('_',' ')?replace('c/','')}</a></h1>
						</#if>

					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-right">
							<@jp.menus>
							<#list menus as menu>
								<li>
									<#if REQUEST.requestURI.substring(3) == (menu.title?replace(' ','%20'))>
										<a href="${menu.url!}" class="link-kumya active"><span data-letters="${menu.title!}">${menu.title!}</span></a>
										<#else>
											<a href="${menu.url!}" class="link-kumya"><span data-letters="${menu.title!}">${menu.title!}</span></a>
									</#if>

								</li>
							</#list>
						</@jp.menus>
						</ul>
						<div class="clearfix"> </div>
					</div>
				</div>
			</nav>
		</div>
		<!--//navigation-->
		<#if REQUEST.requestURI == '/j/'>
			<div class="banner-text">
				<!--banner Slider starts Here-->
				<script src="${CTPATH}/js/responsiveslides.min.js"></script>
				<script>
                    // You can also use "$(window).load(function() {"
                    $(function () {
                        // Slideshow 3
                        $("#slider3").responsiveSlides({
                            auto: true,
                            pager: true,
                            nav: false,
                            speed: 500,
                            namespace: "callbacks",
                            before: function () {
                                $('.events').append("<li>before event fired.</li>");
                            },
                            after: function () {
                                $('.events').append("<li>after event fired.</li>");
                            }
                        });

                    });
				</script>
				<!--//End-slider-script-->
				<div  id="top" class="callbacks_container">
					<ul class="rslides" id="slider3">
						<@jp.menus>
						<#list menus as menu>
							<li>
								<div class="banner-text-info">
									<h2>${menu.title!}</h2>
									<h3>${menu.title!}</h3>
									<div class="more">
										<a href="${menu.url!}" class="button-pipaluk button--inverted"> Read More</a>
									</div>
								</div>
							</li>
						</#list>
					</@jp.menus>
					</ul>
				</div>
			</div>
		</#if>
	</div>
	</div>

	<#nested>
		<!--welcome-->
		<!--//slid-->
		<!--footer-->
		<!--//footer-->
		<div class="footer">
			<div class="container">
				<div class="clearfix"> </div>
				<div class="footer-copy">
					<p>Copyright &copy; 2017.Prominent Ego Sdn All rights reserved.</p>
				</div>
			</div>
		</div>

		<!-- script-for prettySticky -->
		<script src="${CTPATH}/js/prettySticky.js"></script>
		<!--//script-for prettySticky -->
		<!-- Bootstrap core JavaScript
        ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="${CTPATH}/js/bootstrap.js"></script>
	</body>
	</html>
</#macro>